<template>
    <div class="category_body">
        <div class="left">
            <div v-for="(item, index) in tabInfo" :key="index">
                <el-button link>
                    {{ item }}
                </el-button>
            </div>
        </div>
        <div class="main">
            <div>
                <CategoryCard
                    url="https://www.showjane.com/public/upload/goods/thumb/583/goods_thumb_583_0_140_140.jpeg"
                    title="秀匠货架" num="S-6118K2" />
            </div>
            <div class="footer">
                <el-pagination background layout="prev, pager, next" :page-size="10" :pager-count="10" :total="120" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { getProducts } from "@/apis/apis.ts";
import { onMounted, ref } from 'vue'
const tabInfo = ref([])

onMounted(async () => {
    const res = await getProducts();
    console.log(res);
    tabInfo.value = res.tab;
})

</script>

<style scoped lang="scss">
.category_body {
    width: 1300px;
    margin: 0 auto;
    margin-bottom: 26px;
    display: flex;
    justify-content: space-between;

    & .left {
        width: 200px;

        &>div {

            margin-bottom: 26px;

            & :deep(.el-button) {
                font-size: 14px;
                font-weight: bold;
                line-height: 20px;
                color: black;
            }

            & :deep(.el-button:hover) {
                color: #54BAC9;
            }
        }
    }

    & .main {
        flex: 1;

        & .footer {
            width: 100%;

            & :deep(.el-pagination) {
                display: flex;
                justify-content: center;
                justify-content: center
            }
        }
    }
}
</style>